<!--
 * @Author: 冯本桥
 * @Date: 2024-09-27 13:59:39
 * @LastEditTime: 2024-09-27 14:57:54
 * @LastEditors: 冯本桥
 * @Description: 
 * @FilePath: \app_fe\pages_sub\record\components\baby-info-card.vue
-->
<template>
  <view>
    <view class="top-view">
      <view class="info-view">
        <children-head-view :imgUrl="imgUrl" :gender="gender"></children-head-view>
		<view style="margin-left: 10rpx;">
			<text class="name">{{ name }}</text>
			<view class="desc">
				<view class="male-bg">
					<image
					v-if="gender * 1"
					class="icon-img"
					src="@/static/male-icon.png"
					></image>
					<image
					v-else
					class="icon-img"
					src="@/static/female-icon.png"
					></image>
					<span >{{ formatGender() }}</span>
				</view>
				<view class="male-bg male-bg-time">
					<image
					class="icon-img"
					src="@/static/time-default.png"
					></image>
					<span >{{ formatMonth() }}个月</span>
				</view>
			</view>
		</view>
      </view>
        <image
          class="bg-img"
          src="https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/mp/file/common/2024-10-30/40288ffb926af06201926afb85320000_1730256632321.png"
        ></image>
    </view>

    <view v-if="more" class="base-info-view">
      <view class="item">
        <text class="title">身高(CM)</text>
        <view class="input-bg">
          {{ height === null ? "-" : height }}
        </view>
      </view>
      <view class="item">
        <text class="title">体重(KG)</text>
        <view class="input-bg">
          {{ weight === null ? "-" : weight }}
        </view>
      </view>
      <view class="item">
        <text class="title">头围(CM)</text>
        <view class="input-bg">
          {{ header === null ? "-" : header }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChildrenHeadView from "@/components/children-head-view.vue"
import { wrapMonthByBirthday } from "@/utils/utils.js"
export default {
  name: "babyInfoCard",
  components: {
    ChildrenHeadView
  },
  props: {
    imgUrl: {
      type: String,
      default() {
        return ""
      }
    },
    gender: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    gray: {
      type: Boolean,
      default() {
        return false
      }
    },
    name: {
      type: String,
      default() {
        return ""
      }
    },
    state: {
      type: String,
      default() {
        return ""
      }
    },
    month: {
      type: [String, Number],
      default() {
        return ""
      }
    },
    birthday: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    height: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    weight: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    header: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    more: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {}
  },

  methods: {
    formatGender() {
      if (this.$props.gender === 0 || this.$props.gender === "0") {
        return "女"
      }
      return "男"
    },

    formatMonth() {
      if (!this.$u.test.isEmpty(this.month)) {
        return this.month
      }

      return wrapMonthByBirthday(parseInt(this.birthday))
    }
  }
}
</script>

<style lang="scss">
.top-view {
  position: relative;
  width: 689rpx;
  height: 251rpx;
  background-color: #fbfcf5;
  box-shadow: 2rpx 2rpx 13rpx 1rpx #edeee8;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .bg-img {
    position: absolute;
    top: -17rpx;
    right: 15rpx;
    z-index: 1;
    width: 126px;
    height: 254rpx;
	
  }

  .info-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 2;
	position: absolute;
    left: 25rpx;
	
	.icon-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.male-bg {
		padding: 6rpx 10rpx;
		background-image: linear-gradient(to right, #e5f0bb, #d6e893);
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
			span {
				margin-left: 10rpx;
			}
	}
	
	.male-bg-time {
		margin-left: 20rpx;
		background-image: linear-gradient(to right, #faf4d2,#fde19d);
	}

    .name {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-top: 10rpx;
	  display: block;
    }

    .desc {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #6e645a;
		margin-top: 15rpx;
	  display: flex;
    }
  }
}

.base-info-view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20rpx;

  .item {
    width: 216rpx;
    height: 192rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    .input-bg {
      width: 176rpx;
      height: 88rpx;
      background: #fafafa;
      border-radius: 20rpx;
      margin-top: 20rpx;
      font-size: 30rpx;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
